<template>
  <div style="hight: 100%">
    <div class="div2">
      <div class="imgb">
        <router-link to="/"
          ><img src="../assets/imgs/xiaomilogo.png" alt="" class="imga"
        /></router-link>
      </div>
      <div>
        <el-button type="text">小米商城</el-button>
        <el-button type="text">MUI</el-button>
        <el-button type="text">云服务</el-button>
        <el-button type="text">协议规则</el-button>
        <el-button type="text">协议规则</el-button>
      </div>
    </div>
    <div class="div3">
      <div class="div3-1">
        <el-cascader-panel :options="options"></el-cascader-panel>
      </div>
      <div class="div3-2">
        <el-carousel arrow="never" height="500px" :interval="6000">
          <el-carousel-item>
            <img src="../assets/imgs/b.jpg" alt="" class="imgl" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="../assets/imgs/a.jpg" alt="" class="imgl" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="../assets/imgs/3.jpg" alt="" class="imgl" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="../assets/imgs/d.jpg" alt="" class="imgl" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="div4">
      <a href=""><img src="../assets/imgs/a1.png" alt="" class="imga1" /></a>

      <a href=""><img src="../assets/imgs/a2.jpg" alt="" class="imga2" /></a>

      <a href=""><img src="../assets/imgs/a3.jpg" alt="" class="imga3" /></a>
    </div>
    <div class="div5">
      <div class="div5-1">
        <img src="../assets/imgs/K40.jpg" alt="" class="imgK40" />
      </div>
      <div class="div5-3">
        <span class="span1">手机</span>
      </div>
      <div class="div5-2">
        <div class="div5-2lift">
          <a href="">
            <img src="../assets/imgs/MIXFOLD.webp" alt="" class="MIXFOLD" />
          </a>
        </div>
        <div class="div5-2right">
          <a :href="'#/Index2?Cid='+item.Cid" v-for="(item, index) in showcard" :key="index">
            <el-card shadow="hover" class="cardfor">
              <img :src="item.Cimg" alt="" class="imgcomm" />
              <h3>{{ item.Cname }}</h3>
              <p>{{ item.Ctxt }}</p>
              <p style="color: #f06000">¥{{ item.Cprice }}</p>
            </el-card>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "zhinan",
          label: "手机 电话卡",
          children: [],
        },
        {
          value: "zujian",
          label: "电视 盒子",
          children: [],
        },
        {
          value: "ziyuan",
          label: "笔记本 平板",
          children: [],
        },
        {
          value: "ziyuan",
          label: "家电 插线板",
          children: [],
        },
        {
          value: "ziyuan",
          label: "出行 穿戴",
          children: [],
        },
        {
          value: "ziyuan",
          label: "智能 路由器",
          children: [],
        },
        {
          value: "ziyuan",
          label: "电源 配件",
          children: [],
        },
        {
          value: "ziyuan",
          label: "生活 箱包",
          children: [],
        },
      ],
      showcard: {},
    };
  },
  methods: {
    showcomm() {
      this.$axios
        .get("http://localhost:16673/api/Commod/ShowCommodl")
        .then((res) => {
          this.showcard = res.data;
        });
    },
  },

  created() {
    this.showcomm();
  },
};
</script>

<style scoped>
.div2 {
  margin: 0 auto;
  width: 1220px;
  height: 100px;
  margin-top: 8px;
}
.div3 {
  margin: 0 auto;
  width: 1220px;
  height: 500px;
}
.imgb {
  float: left;
  margin-top: 5px;
}
.el-button {
  float: left;
  color: black;
  margin-top: 25px;
  font-size: 20px;
  margin-left: 80px;
}
.div3-1 {
  height: 500px;
  position: absolute;
  z-index: 1;
}
.div3-2 {
  position: absolute;
  z-index: 0;
  width: 1220px;
  height: 500px;
}
.div4 {
  margin: 0 auto;
  width: 1220px;
  height: 230px;
  margin-top: 15px;
}
.imga1 {
  width: 393px;
}
.imga2 {
  width: 393px;
  margin-left: 20px;
}
.imga3 {
  width: 393px;
  margin-left: 20px;
}
.div5 {
  margin-top: 10px;
  background-color: #f5f5f5;
}
.div5-1 {
  margin: 0 auto;
  width: 1220px;
  height: 119px;
}
.imgK40 {
  width: 1220px;
  margin-top: 30px;
}
.div5-2 {
  margin: 0 auto;
  width: 1220px;
  height: 700px;
}
.div5-3 {
  margin: 0 auto;
  width: 1220px;
  height: 100px;
  margin-top: 10px;
}
.span1 {
  font-size: 27px;
  line-height: 150px;
}
.MIXFOLD {
  height: 655px;
}
.div5-2lift {
  float: left;
}
.div5-2right {
  width: 970px;
  height: 660px;
  float: right;
}
.cardfor {
  width: 225px;
  height: 319px;
  text-align: center;
  margin-left: 15px;
  margin-bottom: 15px;
  float: left;
  border: 0px;
}
.imgcomm {
  height: 150px;
}
</style>
<style >
.el-cascader-menu__wrap {
  height: 500px;
  width: 200px;
}
.el-cascader-node {
  font-size: 17px;
  margin-top: 22px;
  color: white;
}
.el-cascader-panel.is-bordered {
  border: 0px;
}
.imgl {
  height: 500px;
  width: 1220px;
}
.imga {
  float: left;
  width: 80px;
}
</style>